@blue:#00bafb;
@grey:#eaeaea;
@hd: 1px;
@itemHeight: 30*@hd;
@borderItem: 1*@hd solid #EEE9E9;
@grey-back:#f5f5f5;
.f14 {
  font-size: 14px;
}
.f12 {
  font-size: 12px;
}
.line {
  border-bottom: solid 1px @grey;
}
.ml10 {
  margin-left: 10px;
}
.wea-car-con {
  position:absolute;
  top:0;
  bottom:0;
  width: 100%;
  .wea-date-switch{
    display: inline-block;
  }
  .car-top {
    height:108px;
    line-height:108px;
    margin-bottom:-108px;
  }
  .car-container {
    height: 100%;
    padding-top: 108px;
    overflow: hidden;
    width: 100%;
    .tab-container {
      height: auto;
    }
    .list-container {
      height: auto;
      .wea-new-table {
        height: 100%;
      }
    }
  }
  .car-container-mobile {
    height: 100%;
    padding-top: 76px;
    overflow: hidden;
    width: 100%;
    .tab-container {
      height: auto;
    }
    .list-container {
      height: auto;
      .wea-new-table {
        height: 100%;
      }
    }
  }
  .car-top-con {
    vertical-align: middle;
    padding-left: 10px;
    height:46px;
    line-height:46px;
    .time-select {
      display:inline-block;
      margin-left:30px;
      &>span {
        padding: 0 5px;
        cursor: pointer;
        &.cur{
          color: @blue;
        }
        &.icon-Meeting-Refresh {
          font-size:16px;
          color: #bababa;
          position:relative;
          top: 3px;
          padding-left:10px;
        }
      }
      .picker {
        padding-left: 10px;
      }
    }
    .legend{
      float:right;
      margin-right: 20px;
      margin-bottom: -46px;
      &>div {
        display:inline-block;
        .square {
          width: 14px;
          height: 14px;
          border: solid 1px @grey;
          display: inline-block;
          margin: 0 10px;
          position:relative;
          top: 2px;
        }
      }
    }
  }
  .car-td-modal {
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-color: #c5c5c5;
    display: none;
    position:absolute;
    top: 0;
  }
  .car-tab-header {
    width: 100%;
    border-collapse: collapse;
    table-layout:fixed;
    td, th {
      border: 1px solid @grey;
      height: 30px;
      line-height: 30px;
      font-weight: normal;
      &.search{
        .wea-input-focus {
          top: -1px;
          width: 100%;
          padding-left: 10px;
          input {
            border: none;
          }
        }
      }
    }
    .no-border-top {
      th,td {
        border-top: none;
      }
    }
    .first {
      width: 200px;
    }
  }
  .car-tab {
    width: 100%;
    border-collapse: collapse;
    table-layout:fixed;
    td, th {
      border: 1px solid @grey;
      height: 30px;
      line-height: 30px;
      font-weight: normal;
      position:relative;
      &.car-name {
        padding-left: 16px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        background-color: @grey-back;
        width: 200px;
        &:hover {
          background-color: #e8f9fc;
        }
        &.cur {
          background-color: #e8f9fc;
        }
      }
      .car-subTable {
        border-collapse: collapse;
        height: 100%;
        width: 100%;
        td {
          border: none;
        }
      }
      &:hover {
        &>.car-td-modal {
          display: block;
        }
      }
    }
    td {
      cursor:pointer;
    }
    .no-border-top {
      th,td {
        border-top: none;
      }
    }
    .first {
      width: 200px;
    }
  }
  .ant-tooltip-arrow {
    /*display:none;*/
  }
  .white-tooltip.ant-tooltip  {
    opacity: 1;
    .ant-tooltip-inner {
      background-color: white;
      color: #000;
    }
  }
}
.wea-roomplan-titletip {
  .line {
    margin: 10px 0;
    width: 100%;
    border-bottom: 1px solid #fff;
  }
}
.roomplan-table {
  // -webkit-overflow-scrolling: touch;
  height: calc(~'100% - '100*@hd);
  .table-box {
    white-space: nowrap;
    border-left: @borderItem;
    .item {
      display: inline-flex;
      height: @itemHeight;
      width: @itemHeight;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border-bottom: @borderItem;
      border-right: @borderItem;
      .dsp-unit{
        display: inline-block;
        vertical-align: top;
        height: 30*@hd;
      }
      // .dsp-unit:hover {
      //   background: #eee !important;
      // }
    }
  }
  .roomplan-table-top{
    border-top: @borderItem;
    &-head {
      width: 103*@hd;
      height: 41*@hd;
      float: left;
      display: inline-flex;
      // justify-content: center;
      align-items: center;
      border-right: @borderItem;
      border-bottom: @borderItem;
      .wm-browser {
        width: 100%;
        margin-left: 10px;
        margin-top: 6px;
      }
    }
    &-content {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      .table-box {
        width: 100%;
        .item {
          height: 41*@hd;
        }
      }
    }
    &-content::-webkit-scrollbar {// 隐藏滚动条
      display: none;
      width: 0;
    }
  }
  .roomplan-table-box {
    overflow: hidden;
    height: calc(~'100% - '43*@hd);
    &-head {
      // height: 200*@hd;
      width: 103*@hd;
      float: left;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      .head-item {
        width: 103*@hd;
        height: 31*@hd;
        line-height: 30*@hd;
        padding-left: 10px;
        overflow: hidden;
        white-space:nowrap;
        text-overflow: ellipsis;
        background-color: @grey-back;
        border-bottom: @borderItem;
        border-right: @borderItem;
      }
      .head-item:nth-child(2){
        // height: 29px;
      }
      .head-item:first-child {
        border-top: @borderItem;
      }
    }
    &-head::-webkit-scrollbar {// 隐藏滚动条
      display: none;
      width: 0;
    }
    &-content::-webkit-scrollbar {// 隐藏滚动条
      display: none;
      width: 0;
    }
    &-content {
      -webkit-overflow-scrolling: touch;
      .table-box {
        // height: 31*@hd;
        display: flex !important;
        .item {
          flex-shrink: 0;
        }
      }
      .table-box:first-child{
        .item {
          border-top: @borderItem;
        }
      }
    }
  }
}